<template>
  <div>
    <myDivider name="楼宇管理"></myDivider>
    <el-page-header @back="goBack" content="详情">
    </el-page-header>
    <!-- <div class="breadcrumbs">
      <el-breadcrumb separator-class="el-icon-arrow-right" v-model="breadcrumbsData">
        <el-breadcrumb-item v-for="item in breadcrumbsData" :key="item.id" :label="item.shortName"> <a
            @click.prevent="tiktak(item.id)">{{ item.shortName }}</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div> -->

    <div class="wholePage">

      <!-- 详情 -->
      <el-form ref="reinsertForm" :model="reinsertForm" label-width="80px" :inline="true" :rules="insertRules">
        <el-form-item label="楼宇名称:" :label-width="formLabelWidth" class="formItemStyle" prop="name">
          <el-input disabled v-model="reinsertForm.name" autocomplete="off" style="width: 262px"></el-input>
        </el-form-item>

        <el-form-item label="所在小区:" :label-width="formLabelWidth" class="formItemStyle">
          <el-input disabled v-model="reinsertForm.residentialQuartersName" autocomplete="off"
            style="width: 262px"></el-input>
        </el-form-item>

        <el-form-item label="建筑用途:" :label-width="formLabelWidth" class="formItemStyle">
          <el-input disabled v-model="reinsertForm.buildingPurposeName" autocomplete="off"
            style="width: 262px"></el-input>
        </el-form-item>

        <el-form-item label="建筑结构名称:" :label-width="formLabelWidth" class="formItemStyle">
          <el-input disabled v-model="reinsertForm.buildingStructureName" autocomplete="off"
            style="width: 262px"></el-input>
        </el-form-item>

        <el-form-item label="建筑朝向:" :label-width="formLabelWidth" class="formItemStyle">
          <el-input disabled v-model="reinsertForm.buildingTowardName" autocomplete="off"
            style="width: 262px"></el-input>
        </el-form-item>

        <el-form-item label="楼宇高度:" :label-width="formLabelWidth" class="formItemStyle">
          <el-input disabled v-model="reinsertForm.height" autocomplete="off" style="width: 262px"></el-input>
        </el-form-item>

        <el-form-item label="楼宇层数:" :label-width="formLabelWidth" class="formItemStyle">
          <el-input disabled v-model="reinsertForm.countOfFloors" autocomplete="off" style="width: 262px"></el-input>
        </el-form-item>

        <el-form-item label="信息创建时间:" :label-width="formLabelWidth" class="formItemStyle">
          <el-input disabled v-model="reinsertForm.createTime" autocomplete="off" style="width: 262px"></el-input>
        </el-form-item>

        <!-- <el-form-item label="最后修改时间:" :label-width="formLabelWidth" class="formItemStyle">
          <el-input disabled v-model="reinsertForm.updateTime" autocomplete="off" style="width: 262px"></el-input>
        </el-form-item> -->
      </el-form>
      <!-- 详情结束 -->

      <!-- 分割线 -->
      <el-divider></el-divider>



      <!-- tab页 -->
      <el-tabs type="border-card">
        <!-- 房间列表 -->
        <el-tab-pane>
          <span slot="label"><i class="el-icon-school"></i> 房间列表</span>
          <div class="LouYuBox">
            <div>
              <el-select v-model="unitCode" clearable placeholder="请选择单元" @change="roomSouSuo">
                <el-option v-for="item, i in unitCodeData" :key="i" :label="item.name" :value="item.value">
                </el-option>
              </el-select>
              <el-button type="primary" style="margin-top: 20px; margin-left: 15px" icon="el-icon-search"
                @click="roomSouSuo">搜索</el-button>
              <div class="operation" style="margin-bottom: 10px;">
                <el-button type="success" icon="el-icon-plus" @click="openForm">新增</el-button>
                <el-button icon="el-icon-files" @click="ToBatchImport">批量导入</el-button>
              </div>
            </div>
            <div>
              <el-table :data="userData" style="width: 100%" class="menuTable" row-key="uid"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">

                <el-table-column prop="unitCode" label="单元">
                  <template slot-scope="scope">
                    {{ scope.row.unitCode + '单元' }}
                  </template>
                </el-table-column>
                <el-table-column prop="floors" label="楼层">
                  <template slot-scope="scope">
                    {{ scope.row.floors + '层' }}
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="房间名">
                </el-table-column>
                <el-table-column prop="layoutName" label="房间布局">
                </el-table-column>
                <el-table-column prop="ownershipTypeName" label="房间类型">
                </el-table-column>
                <el-table-column prop="ownerName" label="户主">
                </el-table-column>
                <el-table-column prop="roomCertificateFormName" label="产权证书">
                </el-table-column>
                <el-table-column prop="ownershipName" label="所有权">
                </el-table-column>



                <el-table-column label="操作" width="280px">
                  <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="openDetailPage(scope.row)">详情</el-button>
                    <el-button type="primary" icon="el-icon-edit" size="mini"
                      @click="echoValueForUpdate(scope.row)"></el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini"
                      @click="deleteAgencyById(scope.row)"></el-button>
                  </template>
                </el-table-column>
              </el-table>

            </div>
            <myPagination :total="total" :pageNum="pageNum" @PageChange="PageChange" @pageSizeChange="pageSizeChange">
            </myPagination>
          </div>
        </el-tab-pane>

        <!-- 地图 -->
        <!-- <el-tab-pane>
          <span slot="label"><i class="el-icon-location"></i> 详细位置</span>
          <div class="mapStyle">
            <div id="container"></div>
          </div>
        </el-tab-pane> -->
      </el-tabs>
      <!-- tab页结束 -->





    </div>
  </div>
</template>




<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import {
  getFatherAgencies,
  getAddedUserList,
  getroomList,
  getInDetail,
  getDictionaryList,
  getBreadcrumbs,
  getShangJiJiGouList,
  DelRoom
} from "./building";

import {
  getUserList,
} from "../../user/user";



export default {
  data() {
    return {
      unitCode:'',
      unitCodeData: [],//筛选房间的单元数据
      query: {
        //左上角查询input
        name: "",
      },
      //地图相关参数 START
      Marker: null,
      map: null,
      //地图相关参数 END
      options: [],
      fatherAgenciesOptionData: [],
      fatherCompanyIdData: [],
      superAdministratorIdData: [],
      authenticationStatusData: [
        { name: '未认证', id: '0' },
        { name: '已认证', id: '1' },
      ],
      updateStaffId: 0,
      dialogFormVisible: false, //控制弹框开关
      formLabelWidth: "120px", //控制前面label的宽度
      reinsertForm: {
        shortName: '',
        superAdministratorId: '',
        type: '',
        fatherCompanyId: '',
        criCode: '',
        contactName: '',
        telephoneNumber: '',
        authenticationStatus: '',
        criLng: '',
        criLat: '',
      },
      insertRules: {
        phoneNumber: [
          {
            required: true,
            message: "手机号不能为空",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "设备名称不能为空",
            trigger: "blur",
          },
        ],
      },
      operateType: 'insert',
      genderListData: [
        { id: '0', name: "女" }, { id: '1', name: "男" }
      ],
      fatherAgenciesOptionData: [],
      typeOptionData: [],
      agencyQuery: {
        name: "",
      },
      superAdminQuery: {
        userAccount: "",
        userName: ""
      },
      userQuery: {
        userAccount: "",
        userName: ""
      },
      insertUserQuery: {
        userAccount: "",
        userName: "",
        agencyDepartmentId: "",
        agencyPostId: "",
      },
      reinsertForm: {
        confirmType: 'insert',
      },
      breadcrumbsData: [], //面包屑数据
      agencyData: [], //下级机构数据
      userData: [], //已新增员工数据
      superAdminUserData: [], //待添加超级管理员的用户列表
      insertUserData: [], //待新增员工数据
      depmentManageData: [], //部门数据
      agencyPostListData: [], //岗位数据
      agencyPostDisabled: true, //岗位下拉框
      multipleSelection: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,

    }
  },

  activated() {
    this.getUnitCodeData()
    // 查询楼宇列表
    this.queryAddedStaffList();
    this.getAgencyInfo(this.$route.query.id);
    this.operateType = 'binding'


  },
  async mounted() {
    //初始化选项数据
    this.getAgencyTypeOptionData();


  },
  methods: {
    roomSouSuo(){
      console.log('切换了单元');
      this.pageNum = 1
      this.queryAddedStaffList()
    },
    async getUnitCodeData() {
      let res = await this.$api.axios.post('/business/room/getUnitCodeListByBuildingId', {
        "buildingId": this.$route.query.id
      })
      if (res) {
        console.log(res, '单元列表');
        this.unitCodeData = res.data
      }
    },
    ToBatchImport() {
      this.$router.push(`/batchImport?name=房间信息导入&buildingId=${this.$route.query.id}`)
    },
    PageChange(e) {
      this.pageNum = e
      this.queryAddedStaffList()
    },
    pageSizeChange(e) {
      this.pageNum = 1
      this.pageSize = e
      this.queryAddedStaffList()
    },
    // 打开新增楼宇页面
    openForm() {
      this.$router.push({
        path: '/room/roomInsert',
        query: {
          operateType: 'insert',
          id: this.$route.query.id,
          buildingId: this.$route.query.id,
        }
      })
    },
    //打开楼宇详情
    openDetailPage(row) {
      var id = row.id;
      this.$router.push({
        path: '/room/roomDetail',
        query: { id: id }
      }, () => {
        // location.reload();//刷新页面
      })
    },
    //修改房间信息
    echoValueForUpdate(row) {
      this.$router.push({
        path: '/room/roomInsert',
        query: {
          id: row.id,
          operateType: 'update',
          buildingId: this.$route.query.id,
        }
      })
    },
    //删除房间
    deleteAgencyById(row) {
      console.log('删除房间');
      this.$confirm('确定要删除该房间信息吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await DelRoom(row.id)
        console.log(res, '删除楼宇');
        if (res.data.code == 200) {
          this.$message({
            message: "删除成功",
            type: "success"
          });
        } else {
          this.$message({
            message: res.data.message,
            type: "warning"
          });
        }
        this.queryAddedStaffList()

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 定位详细坐标
    positioning(val) {

      // 设置中心点
      this.map.setCenter([val.lon, val.lat])

      // 设置高度
      this.map.setZoom([15])

      // 如果之前添加个散点那么就去除
      if (this.Marker != null) {
        this.Marker.remove()
        console.log('删除marker', this.Marker);
      }

      // 添加散点
      this.Marker = new AMap.Marker({
        position: new AMap.LngLat(val.lon, val.lat),
        title: val.title,
        anchor: 'bottom-center',
      })
      this.map.add(this.Marker);
    },
    // ShowMap(val) {
    //   let that = this
    //   this.$nextTick(() => {
    //     // 如果地图为空 则初始化地图
    //     if (this.map == null) {
    //       AMapLoader.load({
    //         key: "b59ffa4664995330f554d4aedc02b03c", // 申请好的Web端开发者Key，首次调用 load 时必填
    //         version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    //         plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    //       })
    //         .then((AMap) => {
    //           that.map = new AMap.Map("container", {
    //             // 设置地图容器id
    //             // viewMode: "3D", // 是否为3D地图模式
    //             // zoom: 11, // 初始化地图级别
    //             // center: [116.397428, 39.90923], // 初始化地图中心点位置
    //           });
    //           that.positioning(val)
    //         })
    //         .catch((e) => {
    //           console.log(e);
    //         });
    //     } else {
    //       this.positioning(val)
    //     }
    //   })
    // },
    handleChange() {

    },


    /**
     *  上一页
     */
    goBack() {
      this.$router.back(-1);
    },




    /**
     * 获取类型字典数据
     */
    getAgencyTypeOptionData() {
      getDictionaryList("agency_type").then((res) => {
        this.typeOptionData = res.data;
      })
    },



    // 获取机构详情
    getAgencyInfo(id) {
      getInDetail(id).then((res) => {
        console.log(res, '楼宇详情');
        this.reinsertForm = res
        this.reinsertForm.createTime = this.reinsertForm.createTime == null ? this.reinsertForm.createTime : this.reinsertForm.createTime.slice(0, 10);
        this.reinsertForm.updateTime = this.reinsertForm.updateTime == null ? this.reinsertForm.updateTime : this.reinsertForm.updateTime.slice(0, 10);
      })
    },

    //按条件查询账号列表
    queryAddedStaffList() {
      getroomList({ buildingId: this.$route.query.id, pageNum: this.pageNum, pageSize: this.pageSize,unitCode:this.unitCode?this.unitCode:0 }).then((res) => {
        console.log(res, '房间列表');
        this.userData = res.list;
        // this.pageNum = res.pageNum;
        // this.pageSize = res.pageSize;
        this.total = res.total;
      });
    },





    handleSelectionChange(val) {
      this.multipleSelection = val;
    },




    tiktak(id) {
      this.$router.replace({
        path: '/residential/reDetail',
        query: { id: id }
      }, () => {
        location.reload();//刷新页面
      })

    },






  }
};
</script>

<style lang="less" scoped>
.mapStyle {
  height: 350px;
  width: 100%;

  #container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
  }
}

.wholePage {
  margin-top: 50px;
  margin-left: 130px;
  height: 50%;
}

.breadcrumbs {
  margin-top: 20px;
  margin-left: 13px;
  height: 50%;
}

.menuTable {
  margin-top: 40px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.menuTable .cell {
  text-align: center;
}

.findValue {
  width: 13%;
  margin-top: 20px;
  margin-left: 15px;
}

.operation {
  margin-right: 50px;
  float: right;
  margin-top: 20px;
}

.formStyle {
  width: 1780px;
  margin: 20px auto;
}

.formItemStyle {
  margin-bottom: 28px;
  margin-left: 22px;
}

.pageFooter {
  margin-top: 3%;
  margin-left: 40%;
}

.pageFooterFather {
  top: 84%;
  position: relative;
  width: 100%;
}

.el-cascader-menu {
  height: fit-content;
  width: fit-content;
}


.birthdayDateItemStyle {
  margin-bottom: 28px;
  margin-left: 22px;
}
</style>